<template>
	<view class="zone">
		<Header title="新人攻略" color="#fff"></Header>
		<view class="main">
			<view class="top">
				<image class="logo" src="http://img.cpgm.cc/panda/static/login/logo.png" mode="widthFix" />
				<image class="word" src="http://img.cpgm.cc/panda/static/steragy/word.png" mode="widthFix" />
			</view>

			<view class="box" :style="style">
				<!-- tab部分 -->
				<view class="tab">
					<view v-for="item in tablist" :key="item.id" :class="[stat == item.id?'tabactive':'']"
						@click="tabchange(item.id)">
							<image :src="`http://img.cpgm.cc/panda/static/steragy/${item.id == stat?item.select:item.selected}`" mode="widthFix" />
						</view>
				</view>
				<!-- 内容列表 -->
				<view class="content" v-show="stat == 1">
					<image src="http://img.cpgm.cc/panda/static/steragy/xinren.png" mode="widthFix" />
				</view>
				<view class="content" v-show="stat == 2">
					<image src="http://img.cpgm.cc/panda/static/steragy/banzhuan.png" mode="widthFix" />
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stat: 1,//tab状态
				tablist: [{
						id: 1,
						name: '新人攻略',
						isrequist:true,
						select:'g2.png',
						selected:'g1.png'
					},
					{
						id: 2,
						name: '水晶排行榜',
						isrequist:false,
						select:'g4.png',
						selected:'g3.png'
					},
				],
				style:{
					background:'url(http://img.cpgm.cc/panda/static/index/left.png) #30857F',
					backgroundSize:'100% 105%'
				},
				imgarr:['','url(http://img.cpgm.cc/panda/static/index/left.png) #30857F','url(http://img.cpgm.cc/panda/static/index/rightbg.png) #30857F'],
			};
		},
		methods: {
			tabchange(id , index) {
				this.stat = id
				this.style.background = this.imgarr[id]
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: url('http://img.cpgm.cc/panda/static/steragy/bg.png');
	background-size: 100% 100%;
	min-height: 100vh;
}

.top {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20px;

	.logo {
		width: 80px;
	}

	.word {
		width: 60%;
		margin-top: 20px;
	}
}

.box {
	height: calc(100vh - 230px);
	box-shadow: 0px 3px 0px 0px rgba(104,104,104,1), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 10px 10px 0 0;
	padding: 10px;
	background-size: 100% 105% !important;
	margin-top: 20px;
}

	// tab导航
.tab {
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	view {
		width: 50%;
		height: 36px;
		text-align: center;
		line-height: 36px;
		color: rgba(255, 255, 255, 0.51);
		font-size: 22px;
		font-weight: 600;

		image {
			width: 70%;
		}
	}
}

.tabactive {
	color: #00645B !important;
}

.content {
	background: rgba(255, 255, 255, 0.71);
	border-radius: 9px;
	padding: 10px;
	margin-top: 20px;

	image {
		width: 100%;
	}
}


</style>
